{% load staticfiles %}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <title>{{ home_date.title }}</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'home/css/bootstrap.css' %}"/>
    <link rel="stylesheet" href="{% static 'home/css/font-awesome.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'home/css/linea-icon.css' %}"/>
    <link rel="stylesheet" href="{% static 'home/css/fancy-buttons.css' %} "/>

    <!--=== Google Fonts ===-->
    <link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:300,700,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:600,400,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <!--=== Other CSS files ===-->
    <link rel="stylesheet" href="{% static 'home/css/animate.css' %}"/>
    <link rel="stylesheet" href="{% static 'hoem/css/jquery.vegas.css' %}"/>
    <link rel="stylesheet" href="{% static 'home/css/baraja.css' %}"/>
    <link rel="stylesheet" href="{% static 'home/css/jquery.bxslider.css' %}"/>

    <!--=== Main Stylesheets ===-->
    <link rel="stylesheet" href="{% static 'home/css/style.css' %}"/>
    <link rel="stylesheet" href="{% static 'home/css/responsive.css' %}"/>

    <!--=== Color Scheme, three colors are available red.css, orange.css and gray.css ===-->
    <link rel="stylesheet" id="scheme-source" href="{% static 'home/css/schemes/gray.css' %}"/>

    <!--=== Internet explorer fix ===-->
    <!-- [if lt IE 9]>
		<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif] -->


</head>
<body>
<!--=== Preloader section starts ===-->
{#	<section id="preloader">#}
{#		<div class="loading-circle fa-spin"></div>#}
{#	</section>#}
<!--=== Preloader section Ends ===-->

<!--=== Header section Starts ===-->
<div id="header" class="header-section">
    <!-- sticky-bar Starts-->
    <div class="sticky-bar-wrap">
        <div class="sticky-section">
            <div id="topbar-hold" class="nav-hold container">
                <nav class="navbar" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target=".navbar-responsive-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!--=== Site Name ===-->
                        <a class="site-name" href="">{{ home_date.title }}</a>
                    </div>

                    <!-- Main Navigation menu Starts -->
                    <div class="collapse navbar-collapse navbar-responsive-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="current"><a href="#header">主页</a></li>
                            <li><a href="#section-feature">团队</a></li>
                            <li><a href="#section-services">服务</a></li>
                            {#								<li><a href="#step-1">Work Flow</a></li>#}
                            <li><a href="#section-screenshots">展示</a></li>
                            <li><a href="#section-pricing">关于</a></li>
                            {#								<li><a href="#section-download">Download</a></li>#}
                        </ul>
                    </div>
                    <!-- Main Navigation menu ends-->
                </nav>
            </div>
        </div>
    </div>
    <!-- sticky-bar Ends-->
    <!--=== Header section Ends ===-->

    <!--=== Home Section Starts ===-->
    <div id="section-home" class="home-section-wrap center">
        <div class="section-overlay">

            <img style="width:100%;height:100%;" src="{{ home_date.home_back }}">

        </div>
        <div class="container home">
            <div class="row">
                <h1 class="well-come">{{ home_date.home_title }}</h1>

                <div class="col-md-8 col-md-offset-2">
                    <p class="intro-message">{{ home_date.home_brief }}</p>

                    <a href="#section-feature" class="fancy-button button-line button-white vertical">
                        👇
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--=== Home Section Ends ===-->
</div>


<!--=== Features section Starts ===-->
<section id="section-feature" class="feature-wrap">
    <div class="container features center">
        <div class="row">
            <div class="col-lg-12">
                <!--Features container Starts -->
                <ul id="card-ul" class="features-hold baraja-container">
                    {% for date in  fea_date %}
                        <!-- Single Feature Starts -->
                        <li class="single-feature" title="Card style">
                            <img src="{{ date.feature_back }}"
                                 style="width:100%;height:50%;" alt="" class="feature-image"/><!-- Feature Icon -->
                            <h4 class="feature-title color-scheme">{{ date.title }}</h4>
                            <p class="feature-text">
                                {{ date.feature_title }}
                            </p>
                        </li>
                        <!-- Single Feature Ends -->
                    {% endfor %}

                </ul>
                <!--Features container Ends -->

                <!-- Features Controls Starts -->
                <div class="features-control relative">
                    <button class="control-icon fancy-button button-line no-text btn-col bell" id="feature-prev"
                            title="Previous">
								<span class="icon">
									<i class="fa fa-arrow-left"></i>
								</span>
                    </button>
                    <button class="control-icon fancy-button button-line no-text btn-col zoom" id="feature-expand"
                            title="Expand">
								<span class="icon">
									<i class="fa fa-expand"></i>
								</span>
                    </button>
                    <button class="control-icon fancy-button button-line no-text btn-col zoom" id="feature-close"
                            title="Collapse">
								<span class="icon">
									<i class="fa fa-compress"></i>
								</span>
                    </button>
                    <button class="control-icon fancy-button button-line no-text btn-col bell" id="feature-next"
                            title="Next">
								<span class="icon">
									<i class="fa fa-arrow-right"></i>
								</span>
                    </button>
                </div>
                <!-- Features Controls Ends -->
            </div>
        </div>
    </div>
</section>
<!--=== Features section Ends ===-->

<!--=== Services section Starts ===-->
<section id="section-services" class="services-wrap">
    <div class="container services">
        <div class="row">

            <div class="col-md-10 col-md-offset-1 center section-title">
                <h3>What we do best</h3>
            </div>
            <!-- Single Service Starts -->
            {% for date in ser_date %}
                <div class="col-md-6 col-sm-6 service animated" data-animation="fadeInLeft" data-animation-delay="700">
                    {% if  forloop.counter == 1 %}
                        <span class="service-icon center"><i class="icon icon-basic-book-pencil fa-3x"></i></span>
                    {% elif forloop.counter == 2 %}
                        <span class="service-icon center"><i class="icon icon-basic-paperplane fa-3x"></i></span>
                    {% elif forloop.counter == 3 %}
                        <span class="service-icon center"><i class="icon icon-basic-accelerator fa-3x"></i></span>
                    {% elif forloop.counter == 4 %}
                        <span class="service-icon center"><i class="icon icon-basic-lightbulb fa-3x"></i></span>
                    {% endif %}

                    <div class="service-desc">
                        <h4 class="service-title color-scheme">{{ date.title }}</h4>
                        <p class="service-description justify">
                            {{ date.services_title }}
                        </p>
                    </div>
                </div>

            {% endfor %}
        </div>
    </div>
</section>


<!--=== ScreenShots section Starts ===-->
<section id="section-screenshots" class="screenshots-wrap" style="background-color: #FFFFFF;">
    <div class="container screenshots animated" data-animation="fadeInUp" data-animation-delay="1000">
        <div class="row porfolio-container">
            <div class="col-md-10 col-md-offset-1 center section-title">
                <h3 style="color: #000000;">我们的展示</h3>
            </div>
            <!-- Single screenshot starts -->
            {% for date in sec_date %}
                <div class="col-md-4 col-sm-4 col-xs-6">
                    <div class="screenshot">
                        <div class="photo-box">
                            <img src="{{ date.section_back }}" alt=""/>
                            <div class="photo-overlay">
                                <h4>{{ date.title }}</h4>
                            </div>
{#                            <span class="photo-zoom">#}
{#								<a href="single-project.html" class="view-project">#}
{#                                    <i class="fa fa-search-plus fa-2x">#}
{#                                    </i>#}
{#                                </a>#}
{#							</span>#}
                        </div>
                    </div>
                </div>
            {% endfor %}

            <!-- Single screenshot ends -->
        </div>

        <div id="portfolio-loader" class="center">
            <div class="fa-spin">

            </div>
        </div> <!--=== Portfolio loader ===-->

        <div id="portfolio-load" style="color:#000000">

        </div><!--=== ajax content will be loaded here ===-->

        <div class="col-md-12 center back-button">
            <a class="backToProject fancy-button button-line bell btn-col" href="#">
                Back
                <span class="icon">
						<i class="fa fa-arrow-left"></i>
					</span>
            </a>
        </div><!--=== Single portfolio back button ===-->
    </div>
</section>
<!--=== ScreenShots section Ends ===-->


<!--=== Footer section Starts ===-->
<div id="section-pricing" class="footer-wrap" style="background-color: #000000">
    <div class="container footer center">
        <div class="row">
            <div class="col-lg-12">
                <h4 class="footer-title"><!-- Footer Title -->
                    <a class="site-name" href="">{{ home_date.title }}</a>
{#                    <a class="site-name" href="#"><span>DD</span>科创</a>#}
                </h4>

                <!-- Social Links -->
                <div class="social-icons">
                    <ul>
                        <li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter-square"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus-square"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
                        <li><a href="#"><i class="fa fa-flickr"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
                    </ul>
                </div>

                <p class="copyright">©{{ fot_all.year }} {{ fot_all.title }} {{ fot_all.icp }}  {{ fot_all.beian }}
                    <a href="." target="_blank" title="{{ fot_all.title }}">{{ fot_all.title }}</a></p>
            </div>
        </div>
    </div>
</div>
<!--=== Footer section Ends ===-->

<!--==== Js files ====-->
<!--==== Essential files ====-->
<script type="text/javascript" src="{% static 'home/js/jquery-1.11.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/bootstrapValidator.min.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/modernizr.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/jquery.easing.1.3.js' %}"></script>

<!--==== Slider and Card style plugin ====-->
<script type="text/javascript" src="{% static 'home/js/jquery.baraja.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/jquery.vegas.min.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/jquery.bxslider.min.js' %}"></script>

<!--==== MailChimp Widget plugin ====-->
<script type="text/javascript" src="{% static 'home/js/jquery.ajaxchimp.min.js' %}"></script>

<!--==== Scroll and navigation plugins ====-->
<script type="text/javascript" src="{% static 'home/js/jquery.nicescroll.min.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/jquery.nav.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/jquery.appear.js' %}"></script>
<script type="text/javascript" src="{% static 'home/js/jquery.fitvids.js' %}"></script>

<!--==== Custom Script files ====-->
<script type="text/javascript" src="{% static 'home/js/custom.js' %}"></script>

</body>
</html>